{% extends "base.html" %}
{% load staticfiles %}
{% block title %}Admin{% endblock %}
<!--atsystem-->
        <link rel="stylesheet" href="{% static 'vendors/morris/morris.css' %}">


        <script src="{% static 'vendors/jquery-1.9.1.min.js' %}"></script>
        <script src="{% static 'vendors/jquery.knob.js' %}"></script>
        <script src="{% static 'vendors/raphael-min.js' %}"></script>
        <script src="{% static 'vendors/morris/morris.min.js' %}"></script>

        <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.categories.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.pie.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.time.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.stack.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.resize.js' %}"></script>

        <script src="{% static 'assets/scripts.js' %}"></script>
{% block content %}






                <!--/span-->
                <div class="span9" id="content">
                    <div class="row-fluid">
                        	<div class="navbar">
                            	<div class="navbar-inner">
	                                <ul class="breadcrumb">
	                                    <i class="icon-chevron-left hide-sidebar"><a href='#' title="Hide Sidebar" rel='tooltip'>&nbsp;</a></i>
	                                    <i class="icon-chevron-right show-sidebar" style="display:none;"><a href='#' title="Show Sidebar" rel='tooltip'>&nbsp;</a></i>
	                                    <li>
	                                        <a href="/admin/">Dashboard</a> <span class="divider">/</span>	
	                                    </li>
	                                  <!--  <li>
	                                        <a href="#">Settings</a> <span class="divider">/</span>	
	                                    </li>
	                                    <li class="active">Tools</li>-->
	                                </ul>
                            	</div>
                        	</div>
                    	</div>
			   {% if p_user.is_superuser %}
                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">Statistics</div>
                      <!--          <div class="pull-right"><span class="badge badge-warning">View More</span>

                                </div>-->
                            </div>
                            <div class="block-content collapse in">
                                <div class="span3">
                                    <div class="chart" data-percent="{{user_per}}">{{user_per}}%</div>
                                    <div class="chart-bottom-heading"><span><b>User: </b></span><span class="label label-warning" style="background:#ee2c2c;">Not Active</span>
                                    </div>
                                </div>
                                <div class="span3">
                                    <div class="chart" data-percent="{%widthratio host_num.pre_num|add:host_num.den_num host_num.all_num 100   %}">{%widthratio host_num.pre_num|add:host_num.den_num host_num.all_num 100   %}%</div>
                                    <div class="chart-bottom-heading"><span><b>Minions: </b></span><span class="label label-success" style="background:#ee2c2c;" >Conn Failed</span>

                                    </div>
                                </div>
                                <div class="span3">
                                    <div class="chart" data-percent="83">Developing</div>
                                    <div class="chart-bottom-heading"><span><b>User: </b></span><span class="label label-success">Visitors</span><span class="label label-warning">Orders</span>

                                    </div>
                                </div>
                                <div class="span3">
                                    <div class="chart" data-percent="13">Developing</div>
                                    <div class="chart-bottom-heading"><span><b>User: </b></span><span class="label label-success">Visitors</span><span class="label label-warning">Orders</span>
					<span class="label label-info">Orders</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>


				{%  endif %}






		 <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">{{p_user.username}} Information</div>
                                    <div class="pull-right"><span class="badge badge-warning"><a href="/admin/account/userinfo/{{username}}/">Edit</a></span>
				</div>
                            </div>
                            <div class="block-content collapse in">
			    <div class="span3" >
				<p><b><font size="4px">UserId:&nbsp;&nbsp;</font></b>{{p_user.id}}</p>
				<p><b><font size="4px">UserName:&nbsp;&nbsp;</font></b>{{p_user.username}}</p>
				<p><b><font size="4px">Email:&nbsp;&nbsp;</font></b>{{p_user.email}}</p>
				<p><b><font size="4px">Is_active:&nbsp;&nbsp;</font></b>{{p_user.is_active}}</p>
				<p><b><font size="4px">Is_superuser:&nbsp;&nbsp;</font></b>{{p_user.is_superuser}}</p>
				<p><b><font size="4px">LastLogin:&nbsp;&nbsp;</font></b>{{p_user.last_login}}</p>
                             </div>
			    <div class="span3">
                                 <label><b>User Group</b></label>
				<select  class="form-control m-b" multiple size="8" >
				{% for p_g in p_group %}
 				<option>{{p_g.name}}</option>
				{% endfor  %}
				</select>
                             </div>
			    <div class="span3">
                                 <label><b>Permissions</b></label>
                                <select  class="form-control m-b" multiple size="8" style="width: 350px;">
				{%for perm in perms %}
                                <option>{{perm}}</option>
				{% endfor %}
                                </select>

                             </div>

                            </div>
                        </div>
                        <!-- /block -->
                    </div>



                    <!-- morris bar & donut charts -->
                    <div class="row-fluid section">
                         <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">Minion Statistics</div>
<div class="pull-right">

                                </div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span6 ">
                                    <h5>Minion Number</h5>
                                    <div id="hero-bar" style="height: 250px;"></div>
                                </div>
                                <div class="span5 ">
                                    <h5>Minion State Proportion</h5>
                                    <div id="hero-donut" style="height: 250px;"></div>    
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>







                    <div class="row-fluid">
                        <div class="span6">
                            <!-- block -->
                            <div class="block">
                                <div class="navbar navbar-inner block-header">
                                    <div class="muted pull-left">Minions</div>
                                    <div class="pull-right"><span class="badge badge-info">{{m_count}}</span>
					<span class="badge badge-warning"><a href="/admin/hosts/" >View More</a></span>

                                    </div>
                                </div>
                                <div class="block-content collapse in" style="height:350px"  >
                                    <table class="table table-striped" >
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Minion ID</th>
                                                <th>OS Type</th>
                                                <th>Production Name</th>
                                            </tr>
                                        </thead>
                                        <tbody>
					{% for minion in minions %}
                                            <tr>
                                                <td>{{minion.id}}</td>
                                                <td>{{minion.minion_id}}</td>
                                                <td>{{minion.os_type}}</td>
                                                <td>{{minion.productname}}</td>
                                            </tr>
					{% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /block -->
                        </div>
                        <div class="span6">
                            <!-- block -->
                            <div class="block">
                                <div class="navbar navbar-inner block-header">
                                    <div class="muted pull-left">Mgroup</div>
                                    <div class="pull-right"><span class="badge badge-info">{{mg_count}}</span>
					<span class="badge badge-warning"><a href="/admin/mgroups/" >View More</a></span>
                                    </div>
                                </div>
                                <div class="block-content collapse in" style="height:350px">
                                    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped ">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Mgroup Name</th>
                                                <th>Comment</th>
                                            </tr>
                                        </thead>
                                        <tbody>
					{% for mgroup in mgroups %}
                                            <tr>
                                                <td>{{mgroup.id}}</td>
                                                <td>{{mgroup.mg_name}}</td>
                                                <td>{{mgroup.comment}}</td>
                                            </tr>
					{% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /block -->
                        </div>
                    </div>













                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">Gallery</div>
                                <div class="pull-right"><span class="badge badge-info">1,462</span>

                                </div>
                            </div>
















                            <div class="block-content collapse in">
                                <div class="row-fluid padd-bottom">
                                </div>

                                <div class="row-fluid padd-bottom">
                                </div>

                                <div class="row-fluid padd-bottom">
                                  <div class="span3">
                                      <a href="#" class="thumbnail">
					<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="{% static 'images/260180.jpg' %}"/>
                                      </a>
                                  </div>
                                  <div class="span3">
                                      <a href="#" class="thumbnail">
					<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="{% static 'images/260180.jpg' %}"/>
                                      </a>
                                  </div>
                                  <div class="span3">
                                      <a href="#" class="thumbnail">
					<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="{% static 'images/260180.jpg' %}"/>
                                      </a>
                                  </div>
				  <div class="span3">
                                      <a href="#" class="thumbnail">
                                        <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="{% static 'images/260180.jpg' %}"/>
                                      </a>
                                  </div>

                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>
                </div>
            </div>
 	<link rel="stylesheet" href="{% static 'vendors/morris/morris.css' %}">	
        <script src="{% static 'vendors/jquery.knob.js' %}"></script>
        <script src="{% static 'vendors/raphael-min.js' %}"></script>
        <script src="{% static 'vendors/morris/morris.min.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.categories.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.pie.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.time.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.stack.js' %}"></script>
        <script src="{% static 'vendors/flot/jquery.flot.resize.js' %}"></script>
  <script>

        // Morris Bar Chart
        Morris.Bar({
            element: 'hero-bar',
            data: [
                {device: 'accept minion', sells: {{host_num.acc_num}}},
                {device: 'unacc minion', sells: {{host_num.pre_num}} },
                {device: 'reject minion', sells: {{host_num.rej_num}}},
                {device: 'denied minion', sells: {{host_num.den_num}}},
                {device: 'all minion', sells: {{host_num.all_num}}},
                {device: 'minion group', sells: {{host_num.all_group}}}
            ],
            xkey: 'device',
            ykeys: ['sells'],
            labels: ['Num'],
            barRatio: 0.4,
            xLabelMargin: 10,
            hideHover: 'auto',
            barColors: ["#3d88ba"]
        });


        // Morris Donut Chart
        Morris.Donut({
            element: 'hero-donut',
            data: [
                {label: 'Accept Host', value: {% widthratio host_num.acc_num host_num.all_num  100%} },
                {label: 'Unaccept', value: {% widthratio host_num.pre_num host_num.all_num 100 %} },
                {label: 'Reject', value: {% widthratio host_num.rej_num host_num.all_num 100 %} },
                {label: 'Denied', value: {% widthratio host_num.den_num host_num.all_num 100 %} }
            ],
            colors: ["#99ff00","#0033cc", "#ff9900", "#ff0000"],
            formatter: function (y) { return y + "%" }
        });

        </script>
{% endblock %}




